<template>
  <div class="file-selector">
    <span v-if="showButton" @click="dialogVisible = true">
      <el-button type="primary">选取文件</el-button>
    </span>

    <el-dialog
      title="选择文件"
      append-to-body
      modal-append-to-body
      width="820px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogVisible"
    >
      <div class="file-selector-content">
        <div class="file-selector-left">
          <el-menu
            style="border: none;"
            @select="changeFileType"
            :default-active="fileType"
          >
            <el-menu-item index="" :disabled="!!fileType">
              <i class="el-icon-menu"></i>
              <span slot="title">全部文件</span>
            </el-menu-item>

            <el-menu-item index="pic" :disabled="!!fileType && fileType!=='pic'">
              <i class="el-icon-picture"></i>
              <span slot="title">图片</span>
            </el-menu-item>

            <el-menu-item index="video" :disabled="!!fileType && fileType!=='video'">
              <i class="el-icon-menu"></i>
              <span slot="title">视频</span>
            </el-menu-item>

            <el-menu-item index="doc" :disabled="!!fileType && fileType!=='doc'">
              <i class="el-icon-document"></i>
              <span slot="title">文档</span>
            </el-menu-item>

            <el-menu-item index="music" :disabled="!!fileType && fileType!=='music'">
              <i class="el-icon-menu"></i>
              <span slot="title">音乐</span>
            </el-menu-item>

            <el-menu-item index="unknown" :disabled="!!fileType && fileType!=='unknown'">
              <i class="el-icon-more"></i>
              <span slot="title">其他</span>
            </el-menu-item>

          </el-menu>
        </div>
        <div class="file-selector-right">
          <div class="file-breadcrumb">
            <!--目录-->
            <div v-show="catalogArray.length > 1" class="file-catalog" style="width: 110px;">
              <el-breadcrumb separator="|" style="display: inline">
                <el-breadcrumb-item><span @click="returnPrev()" class="a-link">返回上一级</span></el-breadcrumb-item>
                <el-breadcrumb-item></el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="file-catalog" style="width: 500px;">
              <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline">
                <el-breadcrumb-item v-for="(item,index) in catalogArray" :key="item.id">
                  <span v-if="index == catalogArray.length-1">{{item.fileName}}</span>
                  <span v-else @click="skipFolder(index)" class="a-link">{{item.fileName}}</span>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>

          <el-scrollbar class="file-selector-list" v-loading="loading">
            <ul style="padding: 0;">
              <template v-for="item in fileList">
                <li class="file-list-item " @mouseover="handleMouseOverFile(item)" @mouseleave="currentFileId=0">
                  <div>
                    <el-checkbox
                      v-if="item.fileType!=='folder'"
                      v-model="item.checked"
                      v-show="currentFileId === item.id || item.checked"
                      class="file-checked-btn"
                    ></el-checkbox>
                    <img v-if="item.fileType !== 'folder'"
                         :src="getFileType(item)"
                         class="file-item-thumbnail">
                    <img v-if="item.fileType === 'folder'"
                         :src="getFileType(item)"
                         @click="openFolder(item)"
                         class="file-item-thumbnail cursor">
                  </div>
                  <div class="file-item-name">{{item.fileName}}</div>
                </li>
              </template>
            </ul>
            <span v-show="fileList.length===0" style="position: absolute;top: 100px;left: 250px;">暂无数据</span>
          </el-scrollbar>

          <!--分页-->
          <el-pagination
            style="margin: 20px;float: left;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="searchParam.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[12,50,100]"
            :total="total">
          </el-pagination>

        </div>

      </div>
      <span slot="title">
         <div class="inline-block">
             <el-input v-model="searchParam.fileNameVague"
                       prefix-icon="el-icon-search"
                       style="width: 200px;"
                       placeholder="搜索您的文件"
                       clearable
             >
           </el-input>
           <el-button type="primary" size="small" icon="el-icon-search" @click="searchForm">查询</el-button>
        </div>

        <div v-if="!currentFileType" class="inline-block float-right" >
               <el-button
                 @click="addFolder"
                 icon="el-icon-plus"
                 size="small"
               >
                 新建文件夹
               </el-button>

               <es-upload-file
                 :data="{parentId:searchParam.parentId}"
                 action="/admin/file/upload"
                 @uploadSuccess="uploadSuccess"
                 btn-size="small"
               ></es-upload-file>
          <!--<el-button type="primary" icon="el-icon-download" size="small">下载</el-button>-->

        </div>

      </span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectFile">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import config from '../../config'
  import {getList, addFolder} from '../../api/file/fileApi'

  export default {
    name: 'es-file-selector',
    props: {
      fileType: String,//pic video doc music unknown
      maxSelectNumber: {//最多可选数量
        type: Number,
        default: 1
      },
      showButton: Boolean,//是否显示按钮
      show: Boolean,//是否显示文件选择器窗口
      action: String,//上传地址
    },
    data: function () {
      return {
        searchParam: {//表格数据请求参数
          fileNameVague: '',
          fileType: this.fileType,
          parentId: 0,
          page: 1,
          limit: 12
        },
        dialogVisible: this.show,
        uploadUrl: config.uploadUrl,
        loading: false,
        fileList: [],//文件列表
        total: 0,
        catalogArray: [{id: 0, fileName: '全部文件'}],
        currentFileType: "",
        currentFileId: 0,
        checkboxList: [],
      }
    },
    mounted: function () {
      this.changeFileType(this.fileType);
    },
    watch: {
      show(val) {
        this.dialogVisible = val;
      },
      dialogVisible(val) {
        //文件选择器窗口开关回调
        this.$emit('changeWindow', val);
      }
    },
    methods: {
      //新增文件夹
      addFolder(parentId) {
        let _this = this
        parentId = typeof parentId === 'string' ? parentId : _this.searchParam.parentId
        _this.$prompt('请输入文件夹名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\S\s]{1,200}$/,
          inputErrorMessage: '请输入1-200个字符的名称'
        }).then(({value}) => {
          if (!value) {
            _this.$message.error('请输入1-200个字符的名称')
            return false
          }
          addFolder({parentId: parentId, fileName: value}).then(res => {
            if (res.code === 200) {
              //刷新表格数据
              _this.getTableData()
              _this.$message.success('新增成功!')
            } else {
              _this.$message.error(res.msg)
            }
          })
        })

      },
      uploadSuccess(res) {
        this.getTableData()
      },
      //选中文件
      handleMouseOverFile(item) {
        this.currentFileId = item.id
      },
      selectFile() {
        let checkedList = []
        this.fileList.forEach(item => {
          if (item.checked) {
            checkedList.push(item)
          }
        })
        if (checkedList.length === 0) {
          this.$message.warning('未选中文件')
          return false
        }
        if (checkedList.length > this.maxSelectNumber) {
          this.$message.warning('最多只能选择' + this.maxSelectNumber + '个文件');
          return false
        }
        this.dialogVisible = false
        this.$emit('select', checkedList)
      },
      changeFileType(fileType) {
        this.catalogArray = [{id: 0, fileName: '全部文件'}]
        this.searchParam.parentId = '';
        switch (fileType) {
          case 'pic':
            this.catalogArray[0].fileName = '图片'
            break
          case 'video':
            this.catalogArray[0].fileName = '视频'
            break
          case 'doc':
            this.catalogArray[0].fileName = '文档'
            break
          case 'music':
            this.catalogArray[0].fileName = '音乐'
            break
          case 'unknown':
            this.catalogArray[0].fileName = '其他'
            break
          default:
            this.searchParam.parentId = '0';
            this.catalogArray[0].fileName = '全部文件'
        }
        this.currentFileType = fileType;
        this.searchParam.fileType = fileType
        //获取数据
        this.getTableData()
      },
      //查询表格
      searchForm() {
        this.searchParam.page = 1
        //获取数据
        this.getTableData()
      },
      //获取数据
      getTableData() {
        let _this = this
        _this.loading = true
        getList(_this.searchParam).then((res) => {
          if (res.code === 200) {
            _this.fileList = res.data
            _this.total = res.total
          } else {
            this.$message.error(res.msg)
          }
          _this.loading = false
        })
      },
      //打开文件夹
      openFolder(parent) {
        this.searchParam.parentId = parent.id
        //刷新表格数据
        this.getTableData()
        this.catalogArray.push({id: parent.id, fileName: parent.fileName})
      },
      //返回上一级
      returnPrev() {
        this.skipFolder(this.catalogArray.length - 2)
      },
      //文件夹目录跳转
      skipFolder(index) {
        let catalogArray = this.catalogArray.slice(0, index + 1)
        this.catalogArray = catalogArray
        this.searchParam.parentId = this.catalogArray[this.catalogArray.length - 1].id
        //刷新表格数据
        this.getTableData()
      },
      getFileType(row) {
        if (row.fileType === 'pic') {
          return row.fileUrl
        }
        return `/static/img/file/${row.fileType}.png`
      },
      handleSizeChange(limit) {
        this.searchParam.limit = limit
        //获取数据
        this.getTableData()
      },
      handleCurrentChange(page) {
        this.searchParam.page = page
        //获取数据
        this.getTableData()
      },
    }
  }
</script>
<style></style>
<style scoped>

</style>

